<template name="gui-im-input">
	<view>
		<view class="gui-im-footer gui-bg-white gui-dark-bg-level-2">
			<view class="gui-flex gui-row gui-nowrap gui-space-between gui-align-items-center">
				<view class="gui-im-menus gui-icons gui-secondary-text" hover-class="gui-tap" v-if="voiceBtnShow"
					@tap="showRec">&#xe617;</view>
				<view class="gui-im-menus gui-icons gui-secondary-text" hover-class="gui-tap" @tap="chooseImg">&#xe63d;
				</view>
				<view class="gui-im-input gui-bg-gray gui-dark-bg-level-3">
					<textarea type="text" v-model="inputMsg" :fixed="true" :maxlength="-1" @confirm="sendTextMsg"
						:cursor-spacing="35"></textarea>
				</view>
				<view class="gui-items gui-primary-text" style="padding:0 20rpx; margin-right:10rpx;"
					hover-class="gui-tap" @tap="sendTextMsg">发送</view>
			</view>
			<view>
				<gui-iphone-bottom></gui-iphone-bottom>
			</view>
		</view>
		<!-- 语音输入 -->
		<view class="gui-im-record gui-bg-gray gui-dark-bg-level-2" v-if="recShow">
			<view class="gui-im-record-txt">
				{{recTxt}}<text v-if="recing">已录音 : {{recLength}} s</text>
			</view>
			<view class="gui-im-record-btn" @tap="rec" :class="[recing ? 'gui-im-recording' : '']"></view>
			<view class="gui-im-send-voice" v-if="tmpVoice != ''">
				<text @tap="sendVoiceMsg">发送语音</text>
			</view>
			<view class="gui-im-record-close gui-icons" @tap="closeRec" v-if="!recing">&#xe78a;</view>
		</view>
	</view>
</template>
<script>
	var bgAudioMannager = uni.createInnerAudioContext();
	export default {
		name: "gui-im-input",
		props: {},
		data() {
			return {
				paddingB: '0',
				uploading: false,
				recShow: false,
				recTxt: "请点击绿色按钮开始录音",
				inputMsg: "",
				recorderManager: null,
				recing: false,
				recLength: 1,
				recTimer: null,
				tmpVoice: '',
				voiceLen: 0,
				voiceBtnShow: false,
				// 播放相关
				player: null,
				playTxt: "试听语音"
			}
		},
		created: function() {
			// #ifndef H5
			this.voiceBtnShow = false;
			this.recorderManager = uni.getRecorderManager();
			this.recorderManager.onStop((res) => {
				this.tmpVoice = res.tempFilePath;
				this.recing = false;
				this.recTxt = "... 已录音 " + this.recLength +
					"s, 点击绿色按钮重新录音 ...";
				clearInterval(this.recTimer);
			});
			this.recorderManager.onError(() => {
				uni.showToast({
					title: '录音失败',
					icon: 'none'
				});
				this.recing = false;
				this.recTxt = "请点击绿色按钮开始录音",
					clearInterval(this.recTimer);
			});
			// #endif
		},
		methods: {
			// 录音
			rec: function() {
				if (this.recing) {
					this.recorderManager.stop();
					this.recing = false;
					this.recTxt = "... 已录音 " + this.recLength +
						+"s, 点击绿色按钮重新录音 ...";
					clearInterval(this.recTimer);
				} else {
					this.recorderManager.start({
						duration: 60000,
						format: 'mp3'
					});
					this.recing = true;
					this.recTxt = "... 正在录音 ...";
					this.recLength = 1;
					this.recTimer = setInterval(() => {
						this.recLength++;
					}, 1000);
				}
			},
			// 发送录音
			sendVoiceMsg: function() {
				if (this.tmpVoice == '') {
					uni.showToast({
						title: "请先录制一段语音",
						icon: "none"
					});
					return;
				}
				// 关闭界面
				this.recShow = false;
				this.$emit('sendVoice', this.tmpVoice, this.recLength);
				this.tmpVoice = '';
				this.recLength = 0;
				this.recTxt = "请点击绿色按钮开始录音";
			},
			// 展示录音界面
			showRec: function() {
				this.recShow = true;
			},
			// 关闭录音界面
			closeRec: function() {
				this.recShow = false;
			},
			// 发送文本消息
			sendTextMsg: function() {
				if (this.inputMsg.length < 1) {
					return false;
				}
				this.$emit('sendText', this.inputMsg);
				this.inputMsg = '';
			},
			// 选择图片
			chooseImg: function() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						this.$emit('chooseImage', tempFilePaths[0], res.tempFiles[0].name || res.tempFiles[
							0].path);
					}
				});
			}
		},
		emits: ['sendVoice', 'sendText', 'chooseImage']
	}
</script>
<style scoped>
	.gui-im-footer {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
	}

	.gui-im-footer .gui-items {
		width: auto;
		line-height: 88rpx;
		flex-shrink: 0;
		font-size: 28rpx;
	}

	.gui-im-menus {
		width: 80rpx;
		height: 80rpx;
		flex-shrink: 0;
		line-height: 80rpx;
		text-align: center;
	}

	.gui-im-input {
		width: 600rpx;
		margin: 10rpx;
		padding: 12rpx 16rpx;
		border-radius: 6rpx;
	}

	.gui-im-input textarea {
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		margin-top: 10rpx;
	}

	.gui-im-record {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 30px 0;
		padding-bottom: 100rpx;
		z-index: 11;
	}

	.gui-im-record-close {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		top: 0px;
		right: 0px;
		z-index: 100;
		text-align: center;
		line-height: 100rpx;
		font-size: 38rpx !important;
	}

	.gui-im-record-txt {
		text-align: center;
		font-size: 26rpx;
		line-height: 30px;
		padding-bottom: 10px;
	}

	.gui-im-record-btn {
		width: 60px;
		height: 60px;
		margin: 0 auto;
		border: 5px solid #F1F2F3;
		border-radius: 100%;
		background: #00B26A;
	}

	.gui-im-recording {
		background: #FF0000;
		animation: fade linear 2s infinite;
	}

	@keyframes fade {
		from {
			opacity: 0.1;
		}

		50% {
			opacity: 1;
		}

		to {
			opacity: 0.1;
		}
	}

	.gui-im-record-txt text {
		color: #00B26A;
		padding: 0 12px;
	}

	.gui-im-send-voice {
		margin-top: 12px;
		font-size: 28rpx;
		color: #00BA62;
		text-align: center;
	}

	.gui-im-send-voice text {
		margin: 0 15px;
		color: #00BA62;
	}

	.gui-icons {
		font-size: 50rpx;
	}
</style>